<template>
  <div class="webar no-mode-translate-wrapper">
    <div v-if="isOpen" class="keyboardMask" @click="onBlur" onTouchMove={this.preventTouchMove}></div>

    <div class="keyboard" :class="{keyboardOpen: this.isOpen}" onTouchMove={this.preventTouchMove} :style="{height: `${winH * 0.32}px`}">
  <transition name="no-mode-translate-fade">
      <div class="keyboardLayout" v-if="inputValue.length < 1" key="lvl1">
        <span v-for="(item, i) in level1" :key="i" class="btnKey">
          <button class="button" type="button" @click="e => selectLevel1(e, item)">
            {{item}}
          </button>
          <div class="btnActive">
            <span>{{item}}</span>
          </div>
        </span>
      </div>
      <div class="keyboardLayout" v-else key="lvl2">
        <span v-for="(item, i) in level2" :key="i" class="btnKey">
          <button class="button" type="button" @click="e => selectLevel2(e, item)">
            {{item}}
          </button>
          <div class="btnActive">
            <span>{{item}}</span>
          </div>
        </span>
        <span class="btnKey backspace">
          <button class="button" type="button" @click="backspace">
            删除
          </button>
        </span>
        <span :class="inputValue.length >= this.maxLength ? 'btnKey confirm-active' : 'btnKey confirm'">
          <button class="button" type="button" @click="confirm">
            确定
          </button>
        </span>
      </div>
  </transition>
    </div>
  </div>
</template>

<script>
module.exports = {
  props: {
    name: "custom-keyboard",
    isOpen: {
      type: Boolean,
      default: true
    },
    level1: {
      type: String,
      default: '粤京津泸鲁冀云辽黑湘皖新苏浙赣鄂桂甘晋蒙陕吉闽贵青藏川宁琼豫渝台港澳'
    },
    level2: {
      type: String,
      default: '1234567890QWERTYUPASDFGHJKLZXCVBNM'
    },
    maxLength: {
      type: Number,
      default: 7
    },
    onChange: {
      type: Function,
      default: (onChangeFunc) => {
        onChangeFunc(this.inputValue);
      }
    },
    onBlur: {
      type: Function,
      default: () => {

      }
    },
    onDone: {
      type: Function,
      default: () => {

      }
    },
    defaultValue: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      winH: window.innerHeight,
      inputValue: this.defaultValue || ''
    }
  },
  watch: {
    defaultValue() {
      this.inputValue = this.defaultValue
    }
  },
  methods: {
    selectLevel1(e, level1) {
      e.preventDefault();
      this.inputValue = level1;
      this.onChange(level1);
    },
    selectLevel2(e, level2) {
      e.preventDefault();
      const inputValue = this.inputValue + level2;
      if (inputValue.length > this.maxLength) {
        this.onDone();
      } else {
        this.inputValue = inputValue;
        this.onChange(inputValue);
      }
    },
    backspace() {
      const inputValue = this.inputValue;
      const backspaceValue = inputValue.substr(0, inputValue.length - 1);
      this.inputValue = backspaceValue;
      this.onChange(backspaceValue);
    },
    confirm() {
      if (this.inputValue.length >= this.maxLength) {
        this.onDone();
      }
    }
  }
}
</script>

<style scoped>
.keyboardMask {
  position: absolute;
  z-index: 100;
  top: 36px;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: transparent;
}

.keyboard {
  position: fixed;
  z-index: 900;
  right: 0;
  bottom: 0;
  left: 0;
  padding-top: 10px;
  user-select: none;
  transition: transform 200ms ease-out;
  transform: translateY(100%);
  text-align: center;
  background-color: #dedfe0;
}

.keyboardOpen {
  transform: translateY(0);
}

.keyboardLayout {
  height: 100%;
  width: 100%;
}

.btnKey {
  position: relative;
  display: inline-block;
  width: 10%;
  height: 25%;
}

.button {
  font-size: .3rem;
  display: inline;
  width: 80%;
  height: 80%;
  margin: 10% auto;
  padding: 0;
  text-align: center;
  border: 0;
  border-radius: 3px;
  background-color: #fff;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
}

.button:focus {
  outline: 0;
}

.button:active ~ .btnActive {
  font-size: .35rem;
  line-height: 200%;
  position: absolute;
  top: 0;
  left: -10%;
  display: table;
  width: 120%;
  height: 100%;
  margin-bottom: 10px;
  transform: translateY(-100%);
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
}

.button:active ~ .btnActive span {
  display: table-cell;
  width: 100%;
  text-align: center;
  vertical-align: middle;
}

.button:active ~ .btnActive::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0;
  content: '';
  transform: translate3d(-50%, 100%, 0);
  border-top: 10px solid #fff;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}

.button i {
  font-size: .4rem !important;
  color: #fff;
}

.btnActive {
  display: none;
}

.hide {
  display: none;
}

.show {
  display: block;
}

.backspace .button {
  color: #fff;
  background-color: #EF4F4F;
}

.confirm .button {
  color: #eee;
}

.confirm-active .button {
  color: #fff;
  background-color: #04BE02;
}

.keyboardHide {
  display: none;
}

.keyboardShow {
  display: block;
}

.no-mode-translate-wrapper {
  position: relative;
}
.no-mode-translate-fade-enter-active, .no-mode-translate-fade-leave-active {
  transition: all .4s;
}
.no-mode-translate-fade-enter, .no-mode-translate-fade-leave-active {
  opacity: 0;
}
.no-mode-translate-fade-enter {
  transform: translateY(calc(100%));
}
.no-mode-translate-fade-leave-active {
    position:absolute;
    bottom: 0;
  transform: translateY(calc(100%));
}
</style>
